<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em id="total_count">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em id="day_cre_artical">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em id="comment_count">35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em id="day_cre_comment">123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./js/http.js"></script>
    <script>
        $(function () {
            // 文章数据统计
            get_data_count();
            // 获取新增文章数量
            get_curve_data();
            // 获取各类型文章数量
            get_pie_data();
            // 获取日文章访问量
            get_column_show();
        })
        // 获取顶部数据展示
        function get_data_count() {
            myAjax('GET', '/admin/data/info', {}, function (resData) {
                // console.log(resData);
                $('#total_count').html(resData.totalArticle);
                $('#day_cre_artical').html(resData.dayArticle);
                $('#comment_count').html(resData.totalComment);
                $('#day_cre_comment').html(resData.dayComment);
            })
        }
        // 获取日新增文章数量
        function get_curve_data() {
            myAjax('GET', '/admin/data/article', {}, function (resData) {
                console.log(resData);
                // let xArrData = [], yArrData = [];
                // resData.date.forEach(item => {
                //     xArrData.push(item.date);
                //     yArrData.push(item.count);
                // })
                let xArrData = resData.date.map(item => item.date);
                let yArrData = resData.date.map(item => item.count);
                create_curve_show(xArrData, yArrData)
            })
        }
        // 获取各类型文章
        function get_pie_data() {
            myAjax('GET', '/admin/data/category', {}, function (resData) {
                console.log(resData);
                let category_name = resData.date.map(item => item.name);
                let category_data = resData.date.map(item => ({ name: item.name, value: item.articles }));
                pie_show(category_name, category_data)
            })
        }
        // 获取访问量
        function get_column_show() {
            myAjax('GET', '/admin/data/visit', {}, function (resData) {
                console.log(resData);
                let dataObj = resData.data;
                let xArrData = [], yArrData = [];
                for (let key in dataObj) {
                    if (dataObj[key]) {      // 如果访问量为零就不显示
                        xArrData.unshift(key);
                        yArrData.unshift(dataObj[key]);
                    }
                }
                column_show(xArrData, yArrData);
            })
        }
        function create_curve_show(xArrData, yArrData) {
            let myChart = echarts.init(document.getElementById('curve_show'));
            let option = {
                title: {
                    text: '文章日新增趋势',
                    left: 'center',
                    top: '10px'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xArrData
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                series: [{
                    data: yArrData,
                    type: 'line',
                    smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function pie_show(category_name, category_data) {
            let myChart = echarts.init(document.getElementById('pie_show'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    left: 10,
                    data: category_name
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        data: category_data
                    }
                ]
            };
            myChart.setOption(option);
        }
        function column_show(xArrData, yArrData) {
            let myChart = echarts.init(document.getElementById('column_show'));
            let option = {
                xAxis: {
                    type: 'category',
                    data: xArrData // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: yArrData, // [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 30,
                    showBackground: true,
                    itemStyle: {
                        color: "rgba(77, 244, 5, 1)"
                    },
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };
            myChart.setOption(option);
        }
    </script>
</body>

</html>